<template>
  <el-container class="goods-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <!-- <div class="label sa-flex">
          <span class="left">众筹管理</span>
          <search-condition
              :conditionLabel="filterParams.conditionLabel"
              @deleteFilter="deleteFilter"
          ></search-condition>
        </div> -->
        <el-tabs class="sa-tabs" v-model="filterParams.data.status" @tab-change="getData(1,$event)">
          <el-tab-pane v-for="c in state.configList" :key="c.id" :label="c.name" :name="c.id"></el-tab-pane>
        </el-tabs>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          <el-button  type="primary" icon="Plus" @click="addRow"
              >新建</el-button>
         
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0">
      <div class="sa-table-wrap" v-loading="loading">
        <el-table
            height="100%"
            class="sa-table"
            :data="table.data"
            @selection-change="changeSelection"
            @sort-change="fieldFilter"
            row-key="id"
            stripe
        >
          <template #empty>
            <sa-empty></sa-empty>
          </template>
          <el-table-column label="" min-width="80"></el-table-column>
          
          <el-table-column  prop="id" label="id" min-width="80"></el-table-column>
          <el-table-column  label="探店分类" min-width="100">
            <template #default="scope">{{ scope.row.tag?.text}}</template>
          </el-table-column>
          
          <el-table-column prop="title" label="任务名称" min-width="100"></el-table-column>
          <el-table-column prop="cloud_fee" label="报酬" min-width="120" />
           

          <el-table-column prop="cloud_number" label="招募人数" min-width="100"></el-table-column>
          <el-table-column prop="activity_time" label="活动时间" min-width="200">
            <template #default="scope">{{ scope.row.activity_time }}~{{ scope.row.end_time }}</template>
          </el-table-column>
          <el-table-column prop="paid_price" label="店铺名称" min-width="200">
            <template #default="scope">{{ scope.row.store?.name}}</template>
          </el-table-column>
          <el-table-column  label="审核状态" min-width="120">
            <template #default="scope">
              <text :style="{color:colorList[scope.row.status?.value]}">{{ scope.row.status?.text}}</text>
            </template>
          </el-table-column>
          <el-table-column  label="任务状态" min-width="120">
            <template #default="scope">{{ scope.row.task_status?.text}}</template>
          </el-table-column>
          <el-table-column  label="上架状态" min-width="120">
            <template #default="scope">{{ scope.row.shelf_status?.text}}</template>
          </el-table-column>
        
          <el-table-column  label="创建时间" width="172">
            <template #default="scope">{{ scope.row.create_time || '-' }}</template>
          </el-table-column>
          
          <el-table-column label="操作" min-width="160" fixed="right">
            <template #default="scope">
              <div class="sa-flex" style="flex-wrap: wrap;">
                <el-button
                    class="is-link sa-m-l-12"
                    type="primary"
                    @click="seeRow(scope.row)"

                >查看
                </el-button>
                <el-button
                    class="is-link sa-m-l-12"
                    type="primary"
                    @click="showPer(scope.row)"
                >参与达人
                </el-button>
                <el-button
                    v-if="scope.row.status?.value==3"
                    class="is-link sa-m-l-12"
                    type="primary"
                    @click="submitAgain(scope.row)"
                >重新提交
                </el-button>
                <el-popconfirm
                    v-if="scope.row.shelf_status?.value==2"
                    width="fit-content"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    title="您确定要上架吗?"
                    @confirm="upStatus(scope.row,1)"
                >
                  <template #reference>
                    <el-button
                        class="is-link"
                        type="primary"
                    >
                    上架
                    </el-button>
                  </template>
                </el-popconfirm>
                <el-popconfirm
                  v-if="scope.row.shelf_status?.value==1"
                    width="fit-content"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    title="您确定要下架吗?"
                    @confirm="upStatus(scope.row,2)"
                >
                  <template #reference>
                    <el-button
                        class="is-link"
                        type="primary"
                    >
                    下架
                    </el-button>
                  </template>
                </el-popconfirm>
                <el-popconfirm
                    width="fit-content"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    title="您确定要删除吗?"
                    @confirm="delRow(scope.row)"
                >
                  <template #reference>
                    <el-button
                        class="is-link sa-m-l-12"
                        type="danger"
                    >删除
                </el-button>
                  </template>
                </el-popconfirm>
                
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <sa-view-bar>
      
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData"/>
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
export default {
  name: 'shop.admin.goods.goods',
};
</script>
<script setup>
import {onMounted, reactive, ref} from 'vue';
import {api} from '../task.service';
import {api as categoryApi} from '@/app/shop/admin/category/category.service';
import {ElMessageBox} from 'element-plus';
import {useModal, usePagination} from '@/sheep/hooks';
import {useSearch} from '@/sheep/components/sa-table/sa-search/useSearch';
import {composeFilter} from '@/sheep/utils';
import {useRouter} from 'vue-router';
import Edit from './edit.vue';
import participatePer from './participatePer.vue';


import HandleExamine from '../comment/handleExamine.vue';


import {useRoute} from 'vue-router';


import {cloneDeep} from 'lodash';
const colorList=['','#8069f6','#32cb4f','#db2424']
const route = useRoute();

const router = useRouter();
// getType
const statusList = reactive({
  data: [],
  color: {
    all: '',
    up: 'success',
    down: 'danger',
    hidden: 'info',
  },
});
const state = reactive({
  raiseTypeList:{},
  configList:[
    {id:0,name:'全部'},
    {id:1,name:'待审核'},
    {id:2,name:'已通过'},
    {id:3,name:'已拒绝'},
  ]
});

// 新建
function addRow() {
  useModal(
    Edit,
    { title: '新建商品任务', type: 'add' },
    {
      confirm: () => {
        getData();
      },
    },
  );
}

// 参与达人
function showPer(row){
  useModal(
    participatePer,
    { title: '参与达人',id:row.id,class:'sa-width-1000' },
    {
      confirm: () => {
      },
    },
  );
}
   
// getCategory
async function getCategory() {
  const {data} = await categoryApi.select();
  for (var key in filterParams.tools) {
    if (filterParams.tools[key].field == 'category_ids') {
      filterParams.tools[key].options.data = data;
    }
  }
}

const filterParams = reactive({
  tools: {
    
    title: {
      type: 'tinput',
      label: '任务名称',
      field: 'title',
      value: '',
    },
    
    task_status: {
      type: 'tselect',
      label: '任务状态',
      field: 'task_status',
      value: '',
      options: {
        data: [
          {name:'未开始',id:1},
          {name:'进行中',id:2},
          {name:'结束',id:3},
        ],
        props: {
          label: 'name',
          value: 'id',
        },
      },
    },
    is_cloud: {
      type: 'tselect',
      label: '任务类型',
      field: 'is_cloud',
      value: '',
      options: {
        data: [
          {name:'云剪',id:1},
          {name:'自剪',id:2},

        ],
        props: {
          label: 'name',
          value: 'id',
        },
      },
    },
    tag: {
      type: 'tselect',
      label: '探店分类',
      field: 'tag',
      value: '',
      options: {
        data: [
          {name:'团购',id:2},
          {name:'供应链',id:3},

        ],
        props: {
          label: 'name',
          value: 'id',
        },
      },
    },
    // admin_name: {
    //   type: 'tinput',
    //   label: '商户名称',
    //   field: 'admin_name',
    //   value: '',
    // },
    shelf_status: {
      type: 'tselect',
      label: '上架状态',
      field: 'shelf_status',
      value: '',
      options: {
        data: [
          {name:'上架',id:1},
          {name:'下架',id:2},

        ],
        props: {
          label: 'name',
          value: 'id',
        },
      },
    },
   
    date: {
        type: 'tdatetimerange',
        label: '创建时间',
        field: 'date',
        value: route.query.create_time || [],
        create_time: route.query.create_time || [],
      },
  },
  data: {
    status:0,
    date:route.query.create_time || [],//创建时间
  },
  conditionLabel: {},
});
const {openFilter, deleteFilter} = useSearch({
  filterParams,
  getData,
});

const loading = ref(true);

// 表格
const table = reactive({
  data: [{}],
  order: null,
  sort: 'sort',
  selected: [],
});

const {pageData} = usePagination();

// 获取数据
async function getData(page,e) {
  loading.value = true;
  if (page) pageData.page = page;
  let tempSearch = cloneDeep(filterParams.data);
  tempSearch.start_time=tempSearch.date[0]
  tempSearch.end_time=tempSearch.date[1]

  const {error, data} = await api.goods.list({
    page: pageData.page,
    list_rows: pageData.list_rows,
    ...tempSearch,
  });
  if (error === 0) {
    table.data = data.data;
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
  
  }
  loading.value = false;
}

// table 字段排序
function fieldFilter({prop, order}) {
  table.order = order == 'ascending' ? 'asc' :( order == 'descending' ?'desc':null);
  table.sort = prop;
  getData();
}

// table 批量选择
function changeSelection(row) {
  table.selected = row;
}



// 上下架
async function upStatus(row,status){
  let res = await api.goods.upStatus({id:row.id,shelf_status:status})
  if(res.error==0){
    getData()
  }
}



// 删除
async function delRow(row){
  let res = await api.goods.delete(row.id)
  if(res.error==0){
    getData()
  }
}



// 查看
function seeRow(row){
  useModal(
    Edit,
    { title: '查看商品任务', type: 'see' ,id:row.id},
    {
      confirm: () => {
        
      },
    },
  );
}
// 重新提交
function submitAgain(row){
  useModal(
    Edit,
    { title: '重新提交', type: 'again' ,id:row.id},
    {
      confirm: () => {
        getData()
      },
    },
  );
}


// 审核
function handle(row){
  useModal(
    HandleExamine,
    {
      title: '修改审核状态',
      class:'sa-width-600'
    },
    {
      confirm: () => {
      },
    },
  );
}








onMounted(() => {
  getCategory();
  getData();
});
</script>
<style lang="scss">
.el-tabs.sa-tabs::after{
  display: none;
}
.goods-dropdown {
  .status-up {
    color: var(--el-color-success);
  }

  .status-down {
    color: var(--el-color-danger);
  }

  .status-hidden {
    color: var(--el-color-info);
  }
}
</style>
<style lang="scss" scoped>
.el-upload {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--el-button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
  font-weight: var(--el-button-font-weight);
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  background-color: var(--el-button-bg-color);
  padding: 8px 15px;
  font-size: var(--el-font-size-base);
  border-radius: var(--el-border-radius-base);
}

.goods-view {
  .el-main {
    .sa-table-wrap {
      margin-left: -48px;
      overflow: hidden;
      height: 100%;

      :deep() {
        .el-table__empty-text {
          margin-left: 48px;
        }
      }

      .title {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: var(--sa-font);
      }

      .subtitle {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        color: var(--sa-subfont);
      }

      .goods-tag {
        max-width: 76px;
        padding: 3px 8px;
        border-radius: 10px;
        line-height: 14px;
        font-size: 12px;
        font-weight: 400;
        margin-right: 8px;
        cursor: pointer;

        &:last-of-type {
          margin-right: 0;
        }

        &.promos-goods {
          color: #faad14;
          background: rgba(250, 173, 20, 0.16);
        }

        &.groupon_ladder-goods,
        &.groupon-goods {
          color: var(--el-color-primary);
          background: var(--t-bg-active);
        }

        &.seckill-goods {
          color: #ff4d4f;
          background: rgba(255, 77, 79, 0.16);
        }
      }

      .sku {
        width: fit-content;
        height: 20px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        padding: 0 8px;
        font-size: 12px;
        color: #fff;
        background: var(--el-color-primary);
        border-radius: 10px;
        cursor: pointer;
      }

      .stock {
        cursor: pointer;

        .add-stock {
          margin-left: 8px;
          color: var(--el-color-primary);
        }
      }

      .el-tag {
        padding: 0 8px;
        border: none;
        cursor: pointer;

        :deep() {
          .el-tag__content {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .sa-expand-table {
      :deep() {
        .el-table__header-wrapper {
          display: none;
        }
      }

      .sku-text {
        font-size: 12px;
        color: var(--sa-font);
      }
    }
  }

  .expand-arrow {
    color: #fff !important;
  }
}
</style>
